<template>
  <div class="h5-header">
    <div class="left">
      <!-- <el-icon class="back-icon" @click="$emit('back')"><ArrowLeft /></el-icon> -->
      <h1 class="title">{{ title }}</h1>
    </div>
    <div class="online-count">
      <el-icon><User /></el-icon>
      <span>{{ onlineCount }}人在线</span>
    </div>
  </div>
</template>

<script setup>
import { ArrowLeft, User } from "@element-plus/icons-vue";

defineProps({
  title: String,
  onlineCount: Number,
});

defineEmits(["back"]);
</script>

<style lang="scss" scoped>
.h5-header {
  height: 44px;
  background: #14152b;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    align-items: center;
    gap: 12px;

    .back-icon {
      font-size: 20px;
      cursor: pointer;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }
  }

  .online-count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4080ff;
    font-size: 14px;
  }
}
</style>
